<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户详情 - 镇长日志</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <!-- 核心工具库 -->
    <script src="../../js/core.js"></script>
    <!-- 引入拆分后的CSS文件 -->
    <link rel="stylesheet" href="../../css/base.css">
    <link rel="stylesheet" href="../../css/layout.css">
    <link rel="stylesheet" href="../../css/components.css">
    <link rel="stylesheet" href="../../css/pages/common.css">
    <link rel="stylesheet" href="../../css/pages/user-center.css">
    <script>
        // Tailwind 配置
        tailwind.config = { 
            theme: {
                extend: {
                    colors: {
                        primary: '#2D6A4F',     // 自然绿色 - 主色调
                        secondary: '#95D5B2',   // 浅绿色 - 辅助色
                        accent: '#FFB703',      // 琥珀色 - 强调色
                        danger: '#E63946',      // 红色 - 危险色
                        success: '#4CAF50',     // 绿色 - 成功色
                        warning: '#FF9800',     // 橙色 - 警告色
                        dark: '#1B263B',        // 深蓝色 - 文字色
                        light: '#F8F9FA',       // 浅色 - 背景色
                        earth: '#8B4513',       // 土色 - 建筑相关
                        wood: '#DEB887',        // 木材色
                        food: '#8BC34A',        // 食物色
                        people: '#F08080'       // 人口色
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                    backgroundImage: {
                        'village-bg': "url('https://picsum.photos/id/1043/1920/1080')",
                    }
                }
            }
        }
    </script>
    <!-- 内联工具函数 -->
    <script>
        // 邮箱验证函数
        function validateEmail(email) {
            const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
            return emailPattern.test(email);
        }
        
        // 密码验证函数
        function validatePassword(password) {
            // 基本密码验证：非空且长度至少为6位
            return password && password.length >= 6;
        }
        
        // 获取用户信息函数 - 支持多个存储键以确保兼容性
        function getUserInfo() {
            const userStr = localStorage.getItem('currentUser') || localStorage.getItem('user') || localStorage.getItem('userInfo');
            return userStr ? JSON.parse(userStr) : null;
        }
        
        // 设置用户信息函数 - 同时更新多个存储键以确保兼容性
        function setUserInfo(userData) {
            localStorage.setItem('currentUser', JSON.stringify(userData));
            localStorage.setItem('user', JSON.stringify(userData));
            localStorage.setItem('userInfo', JSON.stringify(userData));
        }
    </script>
</head>
<body class="bg-gray-50 min-h-screen">
    <!-- 游戏背景 -->
    <div class="fixed inset-0 z-0 opacity-10 bg-cover bg-center bg-village-bg"></div>
    <!-- 导航栏 -->
    <header class="bg-primary/95 text-white shadow-lg z-50 sticky top-0">
        <div class="container mx-auto px-4 py-3">
            <div class="flex justify-between items-center">
                <div class="flex items-center space-x-2">
                    <a href="../../index.html" class="text-xl font-bold flex items-center">
                        <i class="fa fa-home mr-2"></i>
                        镇长日志
                    </a>
                </div>
                

                
                <!-- 移动端菜单按钮 -->
                <button id="mobile-menu-btn" class="p-2 md:hidden text-white">
                    <i class="fa fa-bars text-xl"></i>
                </button>
            </div>
            
            <!-- 移动端菜单 -->
            <div id="mobile-menu" class="md:hidden mt-3 pb-2 hidden">
                <nav class="flex flex-col space-y-2">
                    <a href="../../index.html" class="px-4 py-2 hover:bg-white/10 rounded">首页</a>
                    <a href="../shop/shop.html" class="px-4 py-2 hover:bg-white/10 rounded">商城</a>
                    <a href="../shop/points.html" class="px-4 py-2 hover:bg-white/10 rounded">积分中心</a>
                    <a href="user-center.html" class="px-4 py-2 bg-white/10 rounded">个人中心</a>
                </nav>
                
                <!-- 移动端底部功能区 -->
                <div class="mt-3 pt-3 border-t border-white/10">
                    <button id="mobile-logout-btn" class="w-full px-4 py-2 text-left text-sm text-danger hover:bg-white/10 rounded flex items-center">
                        <i class="fa fa-sign-out mr-2"></i>退出登录
                    </button>
                </div>
            </div>
        </div>
    </header>

    <!-- 主要内容 -->
    <main class="container mx-auto px-4 py-6 pb-20">
        <!-- 个人信息区域 -->
        <section class="mb-8">
            <!-- 用户信息卡片 - 更突出的设计 -->
            <div class="bg-white/95 backdrop-blur-sm rounded-lg shadow-md overflow-hidden">
                <!-- 卡片顶部装饰 -->
                <div class="bg-primary/10 h-12"></div>
                
                <!-- 用户信息内容 -->
                <div class="px-6 py-4 -mt-8">
                    <div class="flex flex-col sm:flex-row items-start sm:items-center">
                        <!-- 用户头像 - 更突出 -->
                        <div class="flex flex-col items-center mr-0 sm:mr-6 mb-4 sm:mb-0">
                            <div id="profile-avatar" class="w-24 h-24 rounded-full overflow-hidden border-4 border-white shadow-md bg-white">
                                <img id="avatar-img" src="" alt="用户头像" class="w-full h-full object-cover">
                            </div>
                            <button id="profile-change-avatar" class="mt-2 bg-primary/90 text-white text-xs rounded px-3 py-1.5 flex items-center justify-center shadow-sm hover:bg-primary transition-colors">
                                <i class="fa fa-camera text-xs mr-1"></i>更换头像
                            </button>
                        </div>
                        
                        <!-- 用户基本信息 - 更清晰的布局 -->
                        <div class="flex-1 w-full">
                            <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                                <div>
                                    <h1 class="text-2xl font-bold text-gray-800 mb-1">个人中心</h1>
                                    <div class="flex items-center">
                                        <h2 id="profile-user-title" class="text-lg font-medium text-gray-700 mr-2">用户头衔</h2>
                                        <p id="profile-username" class="text-sm text-gray-500">小镇名称</p>
                                    </div>
                                </div>
                                <div class="mt-3 md:mt-0 flex space-x-2">
                                    <button id="logout-btn" class="btn-outline flex items-center text-sm py-1 px-3">
                                        <i class="fa fa-sign-out mr-1"></i>退出登录
                                    </button>
                                    <button id="edit-profile-btn" class="btn-primary flex items-center text-sm py-1 px-3">
                                        <i class="fa fa-pencil mr-1"></i>编辑资料
                                    </button>
                                </div>
                            </div>
                            
                            <!-- 积分信息 - 更突出的设计 -->
                            <div class="mt-4 bg-accent/10 rounded-lg p-3 flex items-center justify-between">
                                <div class="flex items-center">
                                    <i class="fa fa-trophy text-accent text-lg mr-3"></i>
                                    <div>
                                        <p class="text-xs text-gray-500">游戏积分</p>
                                        <p id="profile-points" class="text-2xl font-bold text-primary">0</p>
                                    </div>
                                </div>
                                <div class="flex space-x-2">
                                    <button id="points-recharge-btn" class="text-sm bg-primary text-white px-4 py-2 rounded-lg hover:bg-primary/90 transition-colors shadow-sm">
                                        <i class="fa fa-plus-circle mr-1"></i>积分充值
                                    </button>
                                    <a href="../shop/shop.html" class="text-sm bg-secondary text-primary px-4 py-2 rounded-lg hover:bg-secondary/90 transition-colors shadow-sm">
                                        <i class="fa fa-shopping-bag mr-1"></i>积分商城
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 用户统计信息 - 更有层次感 -->
                <div class="mt-2 bg-gray-50 px-6 py-4">
                    <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
                        <div class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="flex items-center justify-between">
                                <p class="text-sm text-gray-500">游戏天数</p>
                                <i class="fa fa-calendar text-primary"></i>
                            </div>
                            <p id="profile-game-days" class="text-xl font-bold text-gray-700 mt-1">0</p>
                        </div>
                        <div class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="flex items-center justify-between">
                                <p class="text-sm text-gray-500">上次登录</p>
                                <i class="fa fa-clock-o text-primary"></i>
                            </div>
                            <p id="profile-last-login" class="text-lg font-bold text-gray-700 mt-1">--</p>
                        </div>
                        <div class="bg-white rounded-lg p-3 shadow-sm">
                            <div class="flex items-center justify-between">
                                <p class="text-sm text-gray-500">注册时间</p>
                                <i class="fa fa-user-plus text-primary"></i>
                            </div>
                            <p id="profile-register-date" class="text-lg font-bold text-gray-700 mt-1">--</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        
        <!-- 功能模块区域 -->
        <section>
            <!-- 选项卡导航 - 更现代的样式 -->
            <div class="bg-white/95 backdrop-blur-sm rounded-t-lg shadow-md mb-0">
                <div class="flex overflow-x-auto" id="tab-nav">
                    <button data-tab="tasks" class="flex-1 py-4 px-2 text-center border-b-2 border-primary text-primary font-medium relative">
                        <i class="fa fa-trophy mr-2"></i>积分任务
                    </button>
                    <button data-tab="records" class="flex-1 py-4 px-2 text-center border-b-2 border-transparent text-gray-500 hover:text-gray-700 transition-colors relative">
                        <i class="fa fa-list-alt mr-2"></i>兑换记录
                    </button>
                    <button data-tab="details" class="flex-1 py-4 px-2 text-center border-b-2 border-transparent text-gray-500 hover:text-gray-700 transition-colors relative">
                        <i class="fa fa-user-circle mr-2"></i>详细资料
                    </button>
                </div>
            </div>
            
            <!-- 选项卡内容容器 - 添加阴影和圆角 -->
            <div class="bg-white/95 backdrop-blur-sm rounded-b-lg shadow-md pb-2">
                <div class="p-6">
                <!-- 积分任务 Tab -->
                <div id="tasks-tab" class="tab-content">
                    <!-- 每日签到 - 优先显示 -->
                    <div class="bg-secondary/10 rounded-lg p-3 flex items-center justify-between mb-3">
                        <div>
                            <h3 class="font-medium text-gray-800">每日签到</h3>
                            <p class="text-xs text-gray-600">每日登录游戏签到，获得积分奖励</p>
                            <div class="mt-1">
                                <span class="bg-accent/20 text-accent text-xs px-2 py-0.5 rounded-full">+10积分</span>
                            </div>
                        </div>
                        <button id="daily-checkin-btn" class="bg-primary text-white px-3 py-1.5 rounded-lg hover:bg-primary/90 transition-colors text-sm">
                            立即签到
                        </button>
                    </div>
                    <p id="next-checkin-countdown" class="text-xs text-gray-500 mt-1 ml-3">下次签到: 00:00:00</p>
                    
                    <!-- 其他任务以更紧凑的网格布局显示 -->
                    <div class="grid grid-cols-1 md:grid-cols-2 gap-3">
                        <!-- 升级建筑 -->
                        <div class="bg-secondary/10 rounded-lg p-3 flex items-center justify-between">
                            <div class="flex-1">
                                <h3 class="font-medium text-gray-800">升级建筑</h3>
                                <div class="flex items-center justify-between">
                                    <p class="text-xs text-gray-600">升级建筑获得积分</p>
                                    <span class="bg-accent/20 text-accent text-xs px-1.5 py-0.5 rounded-full">+5分/次</span>
                                </div>
                            </div>
                            <a href="../../index.html" class="bg-primary text-white px-2 py-1 rounded-lg hover:bg-primary/90 transition-colors text-xs ml-2 whitespace-nowrap">
                                去建设
                            </a>
                        </div>
                        
                        <!-- 解锁新建筑 -->
                        <div class="bg-secondary/10 rounded-lg p-3 flex items-center justify-between">
                            <div class="flex-1">
                                <h3 class="font-medium text-gray-800">解锁建筑</h3>
                                <div class="flex items-center justify-between">
                                    <p class="text-xs text-gray-600">解锁新建筑获得积分</p>
                                    <span class="bg-accent/20 text-accent text-xs px-1.5 py-0.5 rounded-full">+20分/次</span>
                                </div>
                            </div>
                            <a href="../../index.html" class="bg-primary text-white px-2 py-1 rounded-lg hover:bg-primary/90 transition-colors text-xs ml-2 whitespace-nowrap">
                                去解锁
                            </a>
                        </div>
                        
                        <!-- 邀请好友 -->
                        <div class="bg-secondary/10 rounded-lg p-3 flex items-center justify-between">
                            <div class="flex-1">
                                <h3 class="font-medium text-gray-800">邀请好友</h3>
                                <div class="flex items-center justify-between">
                                    <p class="text-xs text-gray-600">邀请好友双方获积分</p>
                                    <span class="bg-accent/20 text-accent text-xs px-1.5 py-0.5 rounded-full">+50分/人</span>
                                </div>
                            </div>
                            <button id="invite-friend-btn" class="bg-primary text-white px-2 py-1 rounded-lg hover:bg-primary/90 transition-colors text-xs ml-2 whitespace-nowrap">
                                立即邀请
                            </button>
                        </div>
                        
                        <!-- 完成特殊事件 -->
                        <div class="bg-secondary/10 rounded-lg p-3 flex items-center justify-between">
                            <div class="flex-1">
                                <h3 class="font-medium text-gray-800">解决事件</h3>
                                <div class="flex items-center justify-between">
                                    <p class="text-xs text-gray-600">解决小镇事件获得积分</p>
                                    <span class="bg-accent/20 text-accent text-xs px-1.5 py-0.5 rounded-full">+10-30分</span>
                                </div>
                            </div>
                            <a href="../../index.html" class="bg-primary text-white px-2 py-1 rounded-lg hover:bg-primary/90 transition-colors text-xs ml-2 whitespace-nowrap">
                                去处理
                            </a>
                        </div>
                    </div>
                    
                    <!-- 账户安全提示 -->
                    <div class="mt-3 bg-secondary/20 border-l-4 border-primary p-3 rounded-r-lg text-sm">
                        <div class="flex items-start">
                            <i class="fa fa-info-circle text-primary mr-2 mt-0.5"></i>
                            <p class="text-gray-600">通过各种任务获取积分，兑换更多精美商品。</p>
                        </div>
                    </div>
                </div>
                
                <!-- 积分兑换记录 Tab -->
                <div id="records-tab" class="tab-content hidden">
                    <div class="overflow-x-auto">
                        <table class="w-full table-auto">
                            <thead>
                                <tr class="bg-gray-50">
                                    <th class="py-2 px-2 text-left text-xs text-gray-600">时间</th>
                                    <th class="py-2 px-2 text-left text-xs text-gray-600">商品</th>
                                    <th class="py-2 px-2 text-left text-xs text-gray-600">积分</th>
                                    <th class="py-2 px-2 text-left text-xs text-gray-600">状态</th>
                                </tr>
                            </thead>
                            <tbody id="exchange-records">
                                <tr class="border-b">
                                    <td class="py-2 px-2 text-xs">2025-10-25</td>
                                    <td class="py-2 px-2 text-xs">蓝牙耳机</td>
                                    <td class="py-2 px-2 text-xs text-danger">-1200</td>
                                    <td class="py-2 px-2"><span class="bg-success/20 text-success text-xs px-1.5 py-0.5 rounded-full">已完成</span></td>
                                </tr>
                                <tr class="border-b">
                                    <td class="py-2 px-2 text-xs">2025-10-20</td>
                                    <td class="py-2 px-2 text-xs">保温水杯</td>
                                    <td class="py-2 px-2 text-xs text-danger">-500</td>
                                    <td class="py-2 px-2"><span class="bg-success/20 text-success text-xs px-1.5 py-0.5 rounded-full">已完成</span></td>
                                </tr>
                                <tr class="border-b">
                                    <td class="py-2 px-2 text-xs">2025-10-15</td>
                                    <td class="py-2 px-2 text-xs">时尚背包</td>
                                    <td class="py-2 px-2 text-xs text-danger">-850</td>
                                    <td class="py-2 px-2"><span class="bg-warning/20 text-warning text-xs px-1.5 py-0.5 rounded-full">处理中</span></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                    
                    <div class="mt-4 text-center">
                        <a href="../shop/shop.html" class="inline-block px-4 py-2 bg-primary text-white rounded-lg hover:bg-primary/90 transition-colors text-sm">
                            <i class="fa fa-shopping-bag mr-1"></i>前往商城
                        </a>
                    </div>
                </div>
                
                <!-- 用户详细信息 Tab -->
                <div id="details-tab" class="tab-content hidden">
                    <div class="grid grid-cols-2 gap-3">
                        <div>
                            <p class="text-xs text-gray-500">用户ID</p>
                            <p id="detail-user-id" class="text-sm text-gray-800 font-medium">--</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">邮箱地址</p>
                            <p id="detail-email" class="text-sm text-gray-800 font-medium">user@example.com</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">小镇名称</p>
                            <p id="detail-username" class="text-sm text-gray-800 font-medium">小镇名称</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">用户名称</p>
                            <p id="detail-user-title" class="text-sm text-gray-800 font-medium">用户名称</p>
                        </div>
                        <div>
                            <p class="text-xs text-gray-500">用户状态</p>
                            <p id="detail-status" class="text-sm text-success font-medium">正常</p>
                        </div>
                    </div>
                    <div class="mt-3">
                        <p class="text-xs text-gray-500">个人简介</p>
                        <p id="detail-bio" class="text-sm text-gray-800 mt-1">暂无简介</p>
                    </div>
                    
                    <!-- 数据导出功能 -->
                    <div class="mt-4">
                        <h3 class="text-sm font-medium text-gray-700 mb-2">数据导出</h3>
                        <div class="flex flex-wrap gap-2">
                            <button id="export-json-btn" class="px-3 py-1.5 bg-primary/90 text-white rounded-lg hover:bg-primary transition-colors text-sm flex items-center">
                                <i class="fa fa-download mr-1"></i> 导出JSON
                            </button>
                            <button id="view-data-btn" class="px-3 py-1.5 bg-secondary text-gray-700 rounded-lg hover:bg-gray-200 transition-colors text-sm flex items-center">
                                <i class="fa fa-eye mr-1"></i> 查看数据
                            </button>
                        </div>
                        <p class="text-xs text-gray-500 mt-1">导出或查看您的本地用户数据</p>
                    </div>
                    
                    <!-- 账户安全提示 -->
                    <div class="mt-3 bg-secondary/20 border-l-4 border-primary p-3 rounded-r-lg text-sm">
                        <div class="flex items-start">
                            <i class="fa fa-info-circle text-primary mr-2 mt-0.5"></i>
                            <p class="text-gray-600">请定期修改密码，不要将账户信息分享给他人，确保您的游戏体验安全愉快。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
    </main>
    
    <!-- 积分充值弹窗 -->
    <div id="recharge-modal" class="fixed inset-0 bg-black/50 z-50 flex items-center justify-center hidden">
        <div class="bg-white rounded-lg w-full max-w-md mx-4 shadow-xl">
            <div class="p-5 border-b">
                <h3 class="text-lg font-bold text-gray-800">积分充值</h3>
                <button id="close-recharge-modal" class="text-gray-500 hover:text-gray-700 float-right">
                    <i class="fa fa-times"></i>
                </button>
            </div>
            <div class="p-5">
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">当前积分</label>
                    <p id="current-points" class="text-xl font-bold text-primary">0</p>
                </div>
                <div class="mb-4">
                    <label for="recharge-amount" class="block text-sm font-medium text-gray-700 mb-1">充值数量</label>
                    <input type="number" id="recharge-amount" min="1" step="1" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary focus:border-primary" placeholder="请输入积分数量">
                    <p id="recharge-error" class="text-xs text-danger mt-1 hidden">请输入有效的整数</p>
                </div>
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">操作后积分</label>
                    <p id="result-points" class="text-xl font-bold text-success">0</p>
                </div>
            </div>
            <div class="p-5 border-t flex justify-end">
                <button id="confirm-recharge-btn" class="bg-primary text-white px-6 py-2 rounded-md hover:bg-primary/90 transition-colors shadow-sm">确认充值</button>
            </div>
        </div>
    </div>
    
    <!-- 编辑资料模态框 -->
    <div id="edit-profile-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
        <div class="bg-white rounded-lg w-full max-w-lg max-h-[90vh] overflow-y-auto">
            <div class="p-6 border-b">
                <h3 class="text-lg font-bold text-gray-800">编辑个人资料</h3>
                <button id="close-edit-modal" class="absolute top-4 right-4 text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <form id="edit-profile-form" class="p-6">
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">小镇名称</label>
                    <input type="text" id="edit-username" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus" required readonly>
                    <p class="text-xs text-gray-500 mt-1">小镇名称不可修改</p>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">用户名称</label>
                    <input type="text" id="edit-user-title" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus" placeholder="例如：快乐镇长">
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">邮箱地址</label>
                    <input type="email" id="edit-email" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus" required>
                    <p id="email-check-message" class="text-xs mt-1 text-gray-500"></p>
                </div>
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">个人简介</label>
                    <textarea id="edit-bio" rows="3" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus"></textarea>
                </div>
                <div class="flex justify-end space-x-3 pt-4 border-t">
                    <button type="button" id="cancel-edit-btn" class="btn-outline">取消</button>
                    <button type="submit" id="save-profile-btn" class="btn-primary">保存修改</button>
                </div>
            </form>
        </div>
    </div>
    
    <!-- 头像设置模态框 -->
    <div id="avatar-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
        <div class="bg-white rounded-lg w-full max-w-md">
            <div class="p-6 border-b flex justify-between items-center">
                <h3 class="text-lg font-bold text-gray-800">修改头像</h3>
                <button id="close-avatar-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-6">
                <div class="flex flex-col items-center mb-6">
                    <div id="avatar-preview" class="w-32 h-32 rounded-full overflow-hidden border-4 border-gray-200 mb-4">
                        <img id="current-avatar-preview" src="" alt="当前头像" class="w-full h-full object-cover">
                    </div>
                    <p class="text-sm text-gray-500">点击上传新头像或输入图片URL</p>
                </div>
                
                <div class="mb-4">
                    <label class="block text-sm font-medium text-gray-700 mb-1">选择本地图片</label>
                    <input type="file" id="avatar-upload" accept="image/*" class="w-full">
                    <p id="file-name" class="text-xs text-gray-500 mt-1"></p>
                </div>
                
                <div class="mb-6">
                    <label class="block text-sm font-medium text-gray-700 mb-1">或输入图片URL</label>
                    <input type="url" id="avatar-url" class="w-full px-4 py-2 border border-gray-300 rounded-md input-focus" placeholder="https://">
                </div>
                
                <div class="flex justify-end space-x-3 pt-4 border-t">
                    <button type="button" id="reset-avatar-btn" class="btn-outline">使用默认头像</button>
                    <button type="button" id="cancel-avatar-btn" class="btn-outline">取消</button>
                    <button type="button" id="confirm-avatar-btn" class="btn-primary" disabled>确认修改</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 邮箱检查提示模态框 -->
    <div id="email-check-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
        <div class="bg-white rounded-lg w-full max-w-sm p-6">
            <div id="email-check-success" class="hidden">
                <div class="text-center mb-4">
                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-success mb-4">
                        <i class="fa fa-check text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-gray-800">邮箱可用</h3>
                    <p class="text-gray-600 mt-2">该邮箱地址可以正常使用</p>
                </div>
                <div class="flex justify-center">
                    <button id="email-check-ok" class="btn-primary">确定</button>
                </div>
            </div>
            <div id="email-check-error" class="hidden">
                <div class="text-center mb-4">
                    <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-red-100 text-danger mb-4">
                        <i class="fa fa-exclamation text-2xl"></i>
                    </div>
                    <h3 class="text-lg font-bold text-gray-800">邮箱已存在</h3>
                    <p class="text-gray-600 mt-2">该邮箱地址已被其他用户使用，请更换邮箱</p>
                </div>
                <div class="flex justify-center">
                    <button id="email-check-close" class="btn-primary">确定</button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- 成功提示模态框 -->
    <div id="success-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
        <div class="bg-white rounded-lg w-full max-w-sm p-6">
            <div class="text-center">
                <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-green-100 text-success mb-4">
                    <i class="fa fa-check text-2xl"></i>
                </div>
                <h3 class="text-lg font-bold text-gray-800">修改成功</h3>
                <p class="text-gray-600 mt-2">您的个人资料已成功更新</p>
            </div>
            <div class="flex justify-center mt-6">
                <button id="success-close" class="btn-primary">确定</button>
            </div>
        </div>
    </div>
    
    <!-- 数据查看模态框 -->
    <div id="data-view-modal" class="fixed inset-0 bg-black/50 z-50 hidden flex items-center justify-center">
        <div class="bg-white rounded-lg w-full max-w-3xl max-h-[90vh] overflow-hidden">
            <div class="p-6 border-b flex justify-between items-center">
                <h3 class="text-lg font-bold text-gray-800">用户数据</h3>
                <button id="close-data-modal" class="text-gray-500 hover:text-gray-700">
                    <i class="fa fa-times text-xl"></i>
                </button>
            </div>
            <div class="p-6 overflow-y-auto max-h-[calc(90vh-120px)]">
                <pre id="user-data-display" class="bg-gray-50 p-4 rounded-lg text-sm overflow-x-auto text-gray-800"></pre>
            </div>
            <div class="p-4 border-t flex justify-end">
                <button id="data-modal-export-btn" class="btn-primary">导出JSON</button>
                <button id="close-data-modal-btn" class="btn-outline ml-2">关闭</button>
            </div>
        </div>
    </div>

    <!-- 内联JavaScript代码已移除，改为模块化导入 -->
    <!-- 所有JavaScript函数已移至模块化文件中 -->
    <!-- 用户资料显示逻辑已移至 profile-editor.js 模块 -->
    <!-- 标签页管理已移至 tab-manager.js 模块 -->
    <!-- 积分任务管理已移至 points-task-manager.js 模块 -->
    <!-- 通知管理已移至 notification-manager.js 模块 -->
           <!-- 所有JavaScript功能已移至模块化文件 -->
            <!-- 页面初始化、退出登录和事件监听功能已移至对应模块 -->
            <!-- 模态框相关JavaScript代码已移至 profile-editor.js 和 avatar-manager.js 模块 -->
            <!-- 关闭编辑模态框逻辑已移至 profile-editor.js 模块 -->
            <!-- 编辑资料表单提交逻辑已移至 profile-editor.js 模块 -->
            <!-- 邮箱检查和成功提示模态框逻辑已移至 profile-editor.js 模块 -->
            <!-- 修改头像功能已移至 avatar-manager.js 模块 -->
            <!-- 关闭头像模态框逻辑已移至 avatar-manager.js 模块 -->
            <!-- 监听文件上传和URL输入逻辑已移至 avatar-manager.js 模块 -->
            <!-- 头像URL预览逻辑已移至 avatar-manager.js 模块 -->
            <!-- 重置默认头像功能已移至 avatar-manager.js 模块 -->
            <!-- 确认修改头像功能已移至 avatar-manager.js 模块 -->
            <!-- 监听邮箱输入逻辑已移至 profile-editor.js 模块 -->
                
                <!-- 所有JavaScript功能已移至模块化文件 -->
                <!-- - 用户资料编辑: profile-editor.js -->
                <!-- - 头像管理: avatar-manager.js -->
                <!-- - 标签页管理: tab-manager.js -->
                <!-- - 积分任务管理: points-task-manager.js -->
                <!-- - 通知管理: notification-manager.js -->
    
    <!-- 底部导航栏 -->
    <div id="bottom-navbar" class="fixed bottom-0 left-0 right-0 bg-white/95 shadow-lg border-t border-gray-200 z-50 backdrop-blur-sm">
        <div class="flex justify-around items-center">
            <a href="../../index.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-home text-xl mb-1"></i>
                <span class="text-xs">首页</span>
            </a>
            <a href="../games/games_list.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-gamepad text-xl mb-1"></i>
                <span class="text-xs">游戏</span>
            </a>
            <a href="../shop/shop.html" class="flex flex-col items-center py-3 px-6 text-gray-500 hover:text-primary transition-colors">
                <i class="fa fa-shopping-bag text-xl mb-1"></i>
                <span class="text-xs">商店</span>
            </a>
            <a href="user-center.html" class="flex flex-col items-center py-3 px-6 text-primary relative">
                <i class="fa fa-user text-xl mb-1"></i>
                <span class="text-xs font-medium">我的</span>
                <span class="absolute bottom-0 left-1/2 transform -translate-x-1/2 w-1/2 h-0.5 bg-primary rounded-t-full"></span>
            </a>
        </div>
    </div>
    
    <style>
        /* PC端样式 */
        @media (min-width: 769px) {
            /* 隐藏底部导航栏 */
            #bottom-navbar {
                display: none;
            }
        }
        
        /* 移动端适配 - 屏幕宽度<768px */
        @media (max-width: 768px) {
            /* 底部导航栏下方的内容添加padding */
            main {
                padding-bottom: 80px;
            }
            
            /* 按钮更大更易点击 */
            button, a.btn {
                min-width: 60px;
                min-height: 50px;
                font-size: 16px;
                padding: 10px;
            }
        }
    </style>
    
    <!-- 导入用户中心模块 -->
    <script type="module">
        // 导入用户中心模块
        import { initializeUserCenter } from './modules/index.js';
        import { showTopNotification } from './modules/notification-manager.js';
        
        // 将函数暴露到全局作用域
        window.showTopNotification = showTopNotification;
        
        // 当DOM加载完成后初始化用户中心
        document.addEventListener('DOMContentLoaded', function() {
            initializeUserCenter();
        });
    </script>
    
    <!-- 积分充值功能 -->
    <script>
        // 获取DOM元素
        const rechargeModal = document.getElementById('recharge-modal');
        const rechargeBtn = document.getElementById('points-recharge-btn');
        const closeRechargeModal = document.getElementById('close-recharge-modal');
        const rechargeAmount = document.getElementById('recharge-amount');
        const rechargeError = document.getElementById('recharge-error');
        const currentPoints = document.getElementById('current-points');
        const resultPoints = document.getElementById('result-points');
        const confirmRechargeBtn = document.getElementById('confirm-recharge-btn');
        const profilePointsElement = document.getElementById('profile-points');
        
        // 显示充值弹窗
        rechargeBtn.addEventListener('click', function() {
            // 从localStorage获取用户信息
            const userInfo = getUserInfo();
            const points = userInfo?.points || 0;
            
            // 更新当前积分显示
            currentPoints.textContent = points;
            resultPoints.textContent = points;
            
            // 重置输入框和错误提示
            rechargeAmount.value = '';
            rechargeError.classList.add('hidden');
            
            // 显示弹窗
            rechargeModal.classList.remove('hidden');
        });
        
        // 关闭弹窗
        closeRechargeModal.addEventListener('click', function() {
            rechargeModal.classList.add('hidden');
        });
        
        // 点击弹窗外部关闭弹窗
        rechargeModal.addEventListener('click', function(e) {
            if (e.target === rechargeModal) {
                rechargeModal.classList.add('hidden');
            }
        });
        
        // 输入框变化时更新结果积分
        rechargeAmount.addEventListener('input', function() {
            const amount = parseInt(rechargeAmount.value);
            const current = parseInt(currentPoints.textContent);
            
            // 验证输入
            if (isNaN(amount) || amount < 1 || !Number.isInteger(amount)) {
                rechargeError.classList.remove('hidden');
                resultPoints.textContent = current;
            } else {
                rechargeError.classList.add('hidden');
                resultPoints.textContent = current + amount;
            }
        });
        
        // 确认充值
        confirmRechargeBtn.addEventListener('click', function() {
            const amount = parseInt(rechargeAmount.value);
            
            // 验证输入
            if (isNaN(amount) || amount < 1 || !Number.isInteger(amount)) {
                rechargeError.classList.remove('hidden');
                return;
            }
            
            // 获取用户信息并更新积分
            const userInfo = getUserInfo();
            if (!userInfo) {
                alert('用户未登录');
                rechargeModal.classList.add('hidden');
                return;
            }
            
            // 更新积分
            userInfo.points = (userInfo.points || 0) + amount;
            setUserInfo(userInfo);
            
            // 更新页面显示
            currentPoints.textContent = userInfo.points;
            resultPoints.textContent = userInfo.points;
            profilePointsElement.textContent = userInfo.points;
            
            // 关闭弹窗并显示成功提示
            rechargeModal.classList.add('hidden');
            
            // 显示成功通知
            if (window.showTopNotification) {
                window.showTopNotification('积分充值成功！', 'success');
            } else {
                alert('积分充值成功！');
            }
        });
        
        // 页面加载时更新用户积分显示
        document.addEventListener('DOMContentLoaded', function() {
            const userInfo = getUserInfo();
            if (userInfo && userInfo.points) {
                profilePointsElement.textContent = userInfo.points;
            }
        });
    </script>
</body>
</html>